<template>

  <lay-container fluid="true" class="fly-container">
    <lay-card v-auth="['admin:dict:type:query']" class="fly-search-card">
      <lay-form size="sm">
        <lay-form-item label="字典标签" prop="dictLabel" mode="inline">
          <lay-input v-model="queryDictTypeParams.dictLabel"></lay-input>
        </lay-form-item>
        <lay-form-item label="有效标志" prop="validFlag" mode="inline">
          <lay-select v-model="queryDictTypeParams.validFlag">
            <lay-select-option value="" label="全部"></lay-select-option>
            <lay-select-option value="Y" label="有效"></lay-select-option>
            <lay-select-option value="N" label="无效"></lay-select-option>
          </lay-select>
        </lay-form-item>

        <lay-form-item mode="inline">
          <lay-button class="fly-button fly-button-search" size="sm" @click=" reloadDictTypeDate(1, flyLayPage.limit) ">
            <lay-icon class="layui-icon-search"></lay-icon>
            查询
          </lay-button>
        </lay-form-item>
      </lay-form>

    </lay-card>

    <div class="fly-table-box">
      <lay-table :page="false" :skin="'line'"
                 :height="'90%'"
                 :columns=" dictTypeColumns "
                 :loading=" tableDictTypeData.loading "
                 :data-source=" tableDictTypeData.rows "
                 @change=" reloadDictTypeDate ">

        <template v-slot:toolbar>
          <lay-button v-auth="['admin:dict:type:save']" size="sm" type="primary" class="fly-button fly-toolbar-addition" @click=" onTapDictTypeAdd ">
            <lay-icon class="layui-icon-addition"></lay-icon>
            新增
          </lay-button>
        </template>

        <template v-slot:operator="{ row }">
          <lay-button v-auth="['admin:dict:type:view']" size="sm" type="primary" class="fly-button fly-view-button" @click=" onTapDictTypeView(row) ">
            <lay-icon class="layui-icon-list"></lay-icon>
            查看
          </lay-button>
          <lay-button v-auth="['admin:dict:data:query']" size="sm" type="primary" class="fly-button fly-edit-button" @click=" onTapDictDataList(row) ">
            <lay-icon class="layui-icon-form"></lay-icon>
            字典列表
          </lay-button>
          <lay-button v-auth="['admin:dict:type:update']" size="sm" type="primary" class="fly-button fly-edit-button" @click=" onTapDictTypeEdit(row) ">
            <lay-icon class="layui-icon-edit"></lay-icon>
            编辑
          </lay-button>

          <lay-button v-auth="['admin:dict:type:delete']" size="sm" type="danger" class="fly-button fly-remove-button"
                      @click=" removeDictTypeHandler(row.id) ">
            <lay-icon class="layui-icon-delete"></lay-icon>
            删除
          </lay-button>

        </template>
      </lay-table>


      <lay-page v-model="flyLayPage.page"
                v-model:limit="flyLayPage.limit"
                :layout="flyLayPage.layout"
                :pages="flyLayPage.pages"
                :limits="flyLayPage.limits"
                theme="blue"
                :total=" tableDictTypeData.total"
                @change="previousNextPage" style="margin-top: 15px"></lay-page>

    </div>
  </lay-container>


  <RefDictType ref="refDictTypeComponent"/>
  <DictDataList ref="refDictDataListComponent"/>

</template>


<script setup lang="ts" name="dictTypeComponent">
import {ref, reactive, onMounted} from 'vue';
import RefDictType from './RefDictType.vue';
import DictDataList from './DictDataList.vue';

import useDictTypeComposable from '@/composables/admin/DictTypeComposable';
import {DictType} from "@/api/admin/model/DictTypeModel";

const {
  refDictTypeComponent,
  dictType,
  flyLayPage,
  tableDictTypeData,
  dictTypeColumns,
  queryDictTypeParams,

  /* 加载表格 */
  reloadDictTypeDate,
  loadTableDictTypeData,

  /* 新增, 编辑, 查看按钮 */
  onTapDictTypeAdd,
  onTapDictTypeEdit,
  onTapDictTypeView,

  /* 接口 */
  removeDictTypeHandler,
  dictTypeDataHandler
} = useDictTypeComposable();


/**
 * 上一页, 下一页
 * @param current
 * @param limit
 */
const previousNextPage = ({current = 1, limit = 10}) => {
  queryDictTypeParams.page = current;
  queryDictTypeParams.limit = limit;
  loadTableDictTypeData(queryDictTypeParams);
}


/**
 * 页面初始化, 加载数据
 */
onMounted(() => {
  reloadDictTypeDate(1, flyLayPage.limit);
})


const refDictDataListComponent = ref();

/*  */
const onTapDictDataList = (dictType: DictType) =>{
  refDictDataListComponent.value?.open(dictType);
}


</script>


<style scoped>

</style>